<template>
  <div id="qualityChart" class="quality-chart"></div>
</template>

<script>
import * as echarts from "echarts";

export default {
  props: {
    zldq: {
      type: Array,
    },
    zlmb: {
      type: Array,
    },
  },

  // 质量图表
  methods: {
    // 质量图表
    drawLine() {
      if (
        this.myChart != null &&
        this.myChart != "" &&
        this.myChart != undefined
      ) {
        this.myChart.dispose(); //解决echarts dom已经加载的报错
      }
      // 基于准备好的dom，初始化echarts实例

      this.myChart = echarts.init(document.getElementById("qualityChart"));

      let option = {
        tooltip: {
          transitionDuration: 0,
          trigger: "axis",
          axisPointer: {
            type: "none",
          },
          formatter: function (params) {
            // console.log(params); // 当我们想要自定义提示框内容时，可以先将鼠标悬浮的数据打印出来，然后根据需求提取出来即可
            let firstParams = params[0];
            if (firstParams.data == 1) {
              firstParams.data = "Ⅰ类";
            } else if (firstParams.data == 2) {
              firstParams.data = "Ⅱ类";
            } else if (firstParams.data == 3) {
              firstParams.data = "Ⅲ类";
            } else if (firstParams.data == 4) {
              firstParams.data = "Ⅳ类";
            } else if (firstParams.data == 5) {
              firstParams.data = "Ⅴ类";
            } else {
              firstParams.data = "劣V类";
            }
            let sndParams = params[1];
                   if (sndParams.data == 1) {
              sndParams.data = "Ⅰ类";
            } else if (sndParams.data == 2) {
              sndParams.data = "Ⅱ类";
            } else if (sndParams.data == 3) {
              sndParams.data = "Ⅲ类";
            } else if (sndParams.data == 4) {
              sndParams.data = "Ⅳ类";
            } else if (sndParams.data == 5) {
              sndParams.data = "Ⅴ类";
            } else {
              sndParams.data = "劣V类";
            }
            return (
              firstParams.name +
              "<br>" +
              "目标：" +
              firstParams.data +
              "<br>" +
              " 当前：" +
              sndParams.data
            );
          },
        },
        // color: ["#0f589f", "#9b9317"],
        grid: {
          left: "18%",
          bottom: "40",
        },
        legend: {
          data: ["目标", "当前"],
          // data: ["目标"],
          top: "20",
          itemWidth: 15,
          itemHeight: 15,
          itemGap: 20,
          textStyle: {
            color: "#66ACB8", // 图例文字颜色
          },
        },

        xAxis: [
          {
            show: true,
            type: "category",

            data: ["兴隆湖", "鹿溪河", "贾家沟", "保水沟"],
            axisLabel: {
              color: "#a8deff",
              textStyle: {
                fontSize: 9,
              },
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#304c92",
                width: 1,
                type: "solid",
              },
            },
          },
        ],
        yAxis: [
          {
            show: true,
            type: "category",
            data: ["", "Ⅰ类", "Ⅱ类", "Ⅲ类", "Ⅳ类", "Ⅴ类", "劣V类"],
            boundaryGap: false,

            axisTick: {
              show: false,
            },
            // max: function (category) {
            //   return category.max + 0.5;
            // },

            axisLabel: {
              color: "#32658f",
              textStyle: { fontSize: 10 },
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#304c92",
                width: 1,
                type: "solid",
              },
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "#212e72",
                type: "solid",
              },
            },
          },
        ],
        series: [
          {
            name: "目标",
            barWidth: "19px",
            barGap: "2%",
            type: "bar",
            data: this.zlmb,
            // data: [1,2,3,5],
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  position: "center",
                  color: "white",
                },
              },
              color: new echarts.graphic.LinearGradient(
                0,
                1,
                0,
                0,
                [
                  {
                    offset: 0,
                    color: "#11489B", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#0699ED", // 100% 处的颜色
                  },
                ],
                false
              ),
            },
          },
          {
            name: "当前",
            type: "bar",
            data: this.zldq,
            // data: [1,2,5,4],
            barWidth: "19px",
            itemStyle: {
              color: new echarts.graphic.LinearGradient(
                0,
                1,
                0,
                0,
                [
                  {
                    offset: 0,
                    color: "#9B7C11", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#D8DA10", // 100% 处的颜色
                  },
                ],
                false
              ),
            },
          },
        ],
      };

      this.myChart.setOption(option);
    },

    // 窗口大小改变
    handleResize() {
      this.myChart.resize(); // 只要窗口大小改变 echarts跟着容器变化
    },
  },
  mounted() {
    // 监听窗口大小改变
    window.addEventListener("resize", this.handleResize);

    this.drawLine();
  },
  watch: {
    zlmb: {
      deep: true, // 开启深度监听
      handler(newValue, oldValue) {
        // 观察到数据变化 重新渲染
        this.myChart.clear(); // 清除画布
        this.drawLine(); // 重新绘制
      },
    },
    zldq: {
      deep: true, // 开启深度监听
      handler(newValue, oldValue) {
        // 观察到数据变化 重新渲染
        this.myChart.clear(); // 清除画布
        this.drawLine(); // 重新绘制
      },
    },
  },
  // 销毁前
  beforeDestroy() {
    // 解绑事件 [性能优化]
    windowNaNpxoveEventListener("resize", this.handleResize);
  },
};
</script>

<style lang="less" scoped>
.quality-chart {
  height: 3.1875rem;
}
</style>